<template>
	<view class="main">
		<scroll-view scroll-y="true" class="scroll" @scrolltolower="loadMore">
			<view class="selectbox">
				<view class="areabox">
					<view>地区：</view>
					<block v-for="(item, index) in area" :key="index">
						<view class="areaitem" :class="index == areaIndex ? 'active' : ''" @click="changeArea(index)">{{ item }}</view>
					</block>
				</view>
				<view class="typebox">
					<view>类型：</view>
					<block v-for="(item, index) in type" :key="index">
						<view class="typeitem" :class="index == typeIndex ? 'active' : ''" @click="changeType(index)">{{ item }}</view>
					</block>
				</view>
			</view>
			<view class="singerbox">
				<view class="singeritem" v-for="(item, index) in singerList" :key="index" @click="gotoSinger(item)">
					<view class="singerimage"><image class="" :src="item.picUrl" mode="widthFix" lazy-load="true" /></view>
					<view class="singername">{{ item.name }}</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import { singerSquare } from '../../api/singersquare.js';
export default {
	data() {
		return {
			// 请求歌手分类数据必传参数cat的值，每个数字第一位表示地区：1 为华语  2 为欧美   6 为日本   7 为韩国  4 为其他
			// 最后以为表示类型：1 为男歌手  2 为女歌手  3 为组合
			catList: [[1001, 1002, 1003], [2001, 2002, 2003], [6001, 6002, 6003], [7001, 7002, 7003], [4001, 4002, 4003]],
			areaIndex: 0,
			typeIndex: 0,
			area: ['华语', '欧美', '日本', '韩国', '其他'],
			type: ['男歌手', '女歌手', '组合'],
			singerList: [],
			limit:21,
			page:1
			// type:[],
			// area: [{ id: -1, name: '全部' }, { id: 7, name: '华语' }, { id: 96, name: '欧美' }, { id: 8, name: '日本' }, { id: 16, name: '韩国' }, { id: 0, name: '其他' }]
		};
	},
	onLoad() {
		this.getSinger();
	},
	methods: {
		async getSinger() {
			let res = await uni.request({
				url: 'http://musicapi.leanapp.cn/artist/list',
				data: {
					cat: this.catList[this.areaIndex][this.typeIndex],
					offset:(this.page-1)*this.limit
				}
			});
			this.singerList.push(...res[1].data.artists);
		},
		changeArea(index) {
			this.areaIndex = index;
			this.singerList=[]
			this.page=1
			this.getSinger();
		},
		changeType(index) {
			this.typeIndex = index;
			this.singerList=[]
			this.page=1
			this.getSinger();
		},
		gotoSinger(singer) {
			uni.navigateTo({
				url: '/pages/singer/singer?id=' + singer.id
			});
			// uni.$emit("getsinger",singer)
			uni.setStorageSync('singer', singer);
		},
		loadMore() {
			this.page = this.page + 1;
			this.getSinger();
		},
	}
};
</script>

<style lang="scss" scoped>
.main {
	padding-bottom: 30upx;
}
.scroll {
	width: 100%;
	height: 100vh;
}
.areabox {
	margin: 0upx 20upx;
	margin-top: 40upx;
	font-size: 30upx;
	display: flex;
	.areaitem {
		width: 100upx;
	}
}
.active {
	color: $uni-bg-color;
}
.typebox {
	margin: 20upx 20upx;
	font-size: 30upx;
	display: flex;
	.typeitem {
		width: 120upx;
	}
}
.singerbox {
	display: flex;
	flex-wrap: wrap;
}

.singerbox .singeritem {
	width: 33.33%;
	margin-top: 30upx;
}

.singerbox .singeritem .singerimage {
	height: 170upx;
	overflow: hidden;
}

.singerbox .singeritem .singerimage image {
	width: 80%;
	height: auto;
	margin-left: 10%;
	border-radius: 10upx;
}

.singerbox .singeritem .singername {
	font-size: 26upx;
	width: 100%;
	text-align: center;
}
</style>
